<!-- evaluate 商品评价 -->
<template>
  <div class="content evaluate">
    <div class="total">
      <div class="total-item" v-for="(o) in total" :key="o.icon">
        <div class="total-title">{{o.name}}</div>
        <div class="total-content" :style="[{color: o.color}]">
          <i :class="o.icon"></i> {{o.value}}
        </div>
      </div>
    </div>

    <h3 class="goods-name">
      {{goodsName}}
    </h3>

    <div class="evaluate-contet">
      <!-- <el-form :model="query" ref="searchForm" label-width="0px" size="medium" class="search-form">
        <el-form-item label="" prop="timeRange">
          <TimeRangePicker v-model="query.timeRange" type="datetimerange" :defaultTime="['00:00:00', '23:59:59']"
                           startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
        </el-form-item>
        <el-form-item label="" prop="star">
          <el-select clearable v-model="query.star" placeholder="请选择评价类型">
            <el-option v-for="item in starTypeList" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0px">
          <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
          <Cbutton type="info" size="medium" @click="handleReset('searchForm')">重置</Cbutton>
        </el-form-item>
      </el-form> -->

      <div class="contents">
        <div class="c-tab">
          <div class="c-tab-title">
            评价内容
          </div>
          <div class="c-tab-body" v-if="tabList.length >= 1">
            <div class="c-tab-list" v-for="item in tabList" :key="item.id">
              <div class="evaluate-content">
                <div class="img">
                  <el-avatar :size="80" :src="item.icon || circleUrl"></el-avatar>
                </div>
                <div class="contents">
                  <p>{{item.nickname}} {{ item.createTime | glbTimeFormat}}</p>
                  <p>
                    <el-rate v-model="item.star" disabled show-score text-color="#ff9900"></el-rate>
                  </p>
                  <p v-if="item.picsList">
                    <el-image :preview-src-list="item.picsList" v-for="v in item.picsList" :key="v" class="product-img-small"
                              :src="v"></el-image>
                  </p>
                  <p>{{item.content}}</p>
                </div>
                <div class="opr">
                  <span class="click-ele" @click="handleReply(item)">回复 </span> |
                  <!-- <span class="click-ele danger" @click="handleRemove(item)">删除</span> -->
                  <span v-if="!item.status" class="click-ele" @click="handleHide(item, 1)">显示</span>
                  <span v-if="item.status" class="click-ele warning" @click="handleHide(item, 2)">隐藏</span>
                </div>
              </div>
              <div class="replay" v-if="item.replayList && item.replayList.length >=1">
                <div v-for="v in item.replayList " :key="v.id" class="replay-list">
                  <div class="replay-content">
                    {{v.content}}
                  </div>
                  <div class="replay-time">
                    <span>{{v.createTime | glbTimeFormat}}</span>
                    <span> | </span>
                    <span>{{v.memberNickName}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="c-tab-list">
            暂无数据
          </div>

          <div style="padding: 0px 20px;">
            <Pagination @pageChange="getPage" :pageDefultData="{
            pageNum: query.pageNum,
            pageRow: query.pageSize,
            totalCount: totalCount }">
            </Pagination>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
// import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
import { ProductEvaluateTotal, ProductEvaluateList, ProductCommentReplay, ProductCommentHide } from '@/api/onlineMan'
export default {
  name: 'evaluate',
  components: {},
  data () {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      totalCount: 0,
      query: {
        timeRange: [],
        startTime: '',
        endTime: '',
        relationType: '2',
        star: '',
        pageNum: 1,
        pageSize: 10
      },
      starTypeList: [
        { value: '', label: '全部' },
        { value: '5', label: '好评' },
        { value: '3', label: '差评' }
      ],
      total: [
        {
          name: '总评论数',
          value: '0',
          icon: 'el-icon-s-flag',
          color: '#1890ff'
        },
        {
          name: '总评论分',
          value: '0',
          icon: 'el-icon-top',
          color: '#cf1321'
        },
        // {
        //   name: '差评',
        //   value: '0',
        //   icon: 'el-icon-bottom',
        //   color: '#3f8600'
        // },
        {
          name: '好评率',
          value: '0.00%',
          icon: 'el-icon-potato-strips',
          color: '#cf1322'
        }
      ],
      loading: false,
      tabList: []
    }
  },
  props: {},
  watch: {},
  computed: {
    goodsId () {
      return this.$route.query.id || ''
    },
    goodsName () {
      return this.$route.query.name || ''
    }
  },
  mounted () {
    this.getTotal()
    this.getList()
  },
  methods: {
    getTotal () {
      let params = {
        productId: this.goodsId,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize
      }
      ProductEvaluateTotal(params).then(res => {
        const data = res.data
        this.total[0].value = data.sum || 0
        this.total[1].value = data.sumNum || 0
        if (!data.sumNum || !data.sum) {
          this.total[2].value = '0.00' + '%'
        } else {
          this.total[2].value = this.total[1].value / (this.total[0].value * 5) * 100 + '%'
        }
      }).catch(() => { })
    },
    getList () {
      let params = {
        productId: this.goodsId,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        nickName: '',
        productName: ''
      }
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        params.startTime = this.query.timeRange[0]
        params.endTime = this.query.timeRange[1]
      }
      // params.star = this.query.star
      ProductEvaluateList(params).then(res => {
        const data = res.data
        data.list.forEach(element => {
          if (element.pics) {
            element.picsList = element.pics.split(',')
          } else {
            element.picsList = []
          }
        })
        this.tabList = data.list
        this.totalCount = data.total
      }).catch(() => { })
    },
    /* 查询 */
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset (formName) {
      this.query.timeRange = []
      this.$refs[formName].resetFields()
    },
    /* 回复 */
    handleReply (row) {
      this.$prompt('', '回复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea'
      }).then(({ value }) => {
        const params = {
          commentId: row.id,
          content: value
        }
        ProductCommentReplay(params).then(res => {
          this.$message.success(res.data || res.msg || '操作成功')
          this.getList()
        }).catch(() => { })
      }).catch(() => { })
    },
    /* 显示 隐藏 */
    handleHide (row, type) {
      let params = {
        status: false,
        commentId: row.id
      }
      let str = '显示'
      if (type === 1) {
        params.status = true
        str = '显示'
      } else {
        params.status = false
        str = '隐藏'
      }
      this.$confirm(`确定要${str}选择的评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ProductCommentHide(params).then(res => {
          this.$message.success(res.data || res.msg || '操作成功')
          this.getList()
        }).catch(e => { })
      }).catch(() => { })
    },
    /* 删除 */
    handleRemove (row) {
      let str = '删除'
      this.$confirm(`确定要${str}该评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => { })
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }

  }
}

</script>
<style lang='scss' scoped>
.evaluate {
  .total {
    display: flex;
    justify-content: space-between;
    .total-item {
      flex: 1;
      padding: 24px;
      box-sizing: border-box;
      border: 1px solid rgb(232, 232, 232);
      margin: 5px 10px;
      border-radius: 2px;
      &:nth-child(1) {
        margin-left: 0;
      }
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
    .total-content {
      font-size: 24px;
      font-weight: bold;
    }
  }
  .goods-name {
    font-weight: bold;
    font-size: 20px;
    margin: 10px 0;
  }
  .c-tab {
    border: 1px solid rgb(232, 232, 232);
  }
  .c-tab-title {
    padding: 16px 20px;
    font-size: 20px;
    border-bottom: 1px solid rgb(232, 232, 232);
  }
  .c-tab-body {
    padding: 16px 20px;
  }
  .c-tab-list {
    text-align: center;
    border-bottom: 1px solid rgb(232, 232, 232);
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    .evaluate-content {
      display: flex;
      .img {
        width: 80px;
        height: 80px;
        box-sizing: border-box;
        img {
          box-sizing: border-box;
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .contents {
        flex: 1;
        text-align: left;
        padding: 0 20px;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.65);
        .product-img-small {
          width: 80px;
          height: 80px;
          margin: 5px;
          border-radius: 2px;
        }
      }
      .opr {
        padding: 0 0px;
        width: 110px;
        text-align: right;
      }
    }
    .replay {
      text-align: right;
      margin-top: 30px;
      .replay-list {
        width: 100%;
        margin-bottom: 20px;
        border-bottom: 1px dashed rgb(175, 135, 77);
        &:nth-last-child(1) {
          margin-bottom: 0px;
          border-bottom: none;
        }
        .replay-time {
          margin: 5px 0px;
        }
      }
    }
  }
}
</style>
